<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/animate.css">
    <link rel="stylesheet" href="../../static/css/me.css">

</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(0)"  class="ui defined-bg attached segment
    defined-padded-tb-medium defined-shadow-small animate__animated animate__fadeInDown">
    <!--流动导航组件-->
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <!--Log(YanYunHua)-->
            <div class="item">
                <img class="ui image" src="../../static/images/plug/zll.png" th:src="@{/images/plug/zll.png}"
                     style="width: 70px;height: 70px;padding-top: 4px">
                <h2 class="ui blue header item">YanYunHua</h2>
            </div>&nbsp;
            <a href="#" class="m-item active item defined-mobile-hide defined-blue"><i class="home blue icon"></i>首页</a>
            <a href="#" class="m-item item defined-mobile-hide defined-blue"><i class="idea blue icon"></i>分类</a>
            <a href="#" class="m-item item defined-mobile-hide defined-blue"><i class="tags blue icon"></i>标签</a>
            <a href="#" class="m-item item defined-mobile-hide defined-blue"><i class="clone blue icon"></i>归档</a>
            <a href="#" class="m-item item defined-mobile-hide defined-blue"><i class="info blue icon"></i>个人主页</a>
            <div class="right m-item item defined-mobile-hide defined-blue">
                <div class="ui right aligned category search">
                    <div class="ui icon input">
                        <input class="prompt" type="text" style="color: #6495ed" placeholder="搜索">
                        <i class="search blue icon"></i>
                    </div>
                    <div class="results"></div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle basic icon button defined-top-right defined-mobile-show defined-bg">
        <i class="sidebar icon"></i>
    </a>
</nav>
</body>

<br>
<br>
<br>
<br>

<div class="defined-container-small defined-padded-tb-max">
    <div class="ui error message defined-padded-tb-huge">
        <div class="ui container">
            <h2>404</h2>
            <p>对不起你访问的资源不存在</p>
        </div>
    </div>
</div>

<br>
<br>
<br>
<br>

<footer th:replace="_fragments :: footer" class="ui defined-bg segment defined-padded-tb-huge">
    <div class="ui center aligned container">
        <div class="ui divided stackable grid"> <!--布局会分成16份-->
            <div class="four wide column">
                <img src="../../static/images/plug/WeChat.PNG" th:src="@{/images/plug/WeChat.PNG}" alt="WeChatQR Code" class="ui centered rounded image"
                     style="width: 110px">
            </div>
            <div class="four wide column">
                <h4 class="ui header defined-opacity-small">博客简介</h4>
                <p class="defined-text-thin defined-text-spaced defined-opacity-small">
                    创建此博客是为了提供一个平台来供自己分享生活、自己的所见所闻所感、以及分享学习心得和资源......
                </p>
            </div>
            <div class="four wide column">
                <h4 class="ui header defined-opacity-small">联系我</h4>
                <div class="ui link list ">
                    <a href="#" class="item">QQ：3320014521</a>
                    <a href="#" class="item">e-mail：woshihauhuaa@outlook.com</a>
                </div>
            </div>
            <div class="four wide column">
                <div class="three wide column">
                    <br>
                    <br>
                    <p class="defined-text-thin defined-text-spaced">
                        愿你编码半生，归来仍是少年......
                    </p>
                </div>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="defined-text-thin defined-opacity-mini">Copyright © 2020-2021 YanYunHua Designed by YanYunHua</p>
    </div>
</footer>
</html>